<template>
  <div class="box">
    <div v-if="isallTodos">
      <el-row
        v-for="(item, index) in allTodos"
        :key="index"
      >
        <el-checkbox
          :checked="item.done===true"
          @change="done(item.name)"
        />
        <span :class="[item.done === true ? 'done' : '']">{{ index + 1 }}、{{ item.name }}</span>
        <el-button
          type="danger"
          size="mini"
          circle
          class="delBtn"
          icon="el-icon-close"
          @click="delItem(item.name)"
        />
        <el-button
          type="success"
          size="mini"
          circle
          class="editBtn"
          icon="el-icon-edit"
          @click="editItem(item.name)"
        />
      </el-row>
    </div>
    <activeList v-if="isactive" />
    <comletedList v-if="iscompleted" />
    <el-row>
      <el-col :span="8">
        <el-button @click="all()">所有</el-button>
      </el-col>
      <el-col
        :span="8"
        :push="2"
      >
        <el-button @click="active()">进行中</el-button>
      </el-col>
      <el-col
        :span="8"
        :push="4"
      >
        <el-button
          @click="completed()"
        >已完成</el-button>
      </el-col>
    </el-row>
    <dia-log
      ref="dialog"
      @close="closeDialog"
      @closed="closedDialog"
    >
      <template v-slot:content>
        <el-form
          ref="myForm"
          :model="formData"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            label="事件名"
            prop="cureentTodoName"
          >
            <el-input
              v-model="formData.cureentTodoName"
              placeholder="请输入用户名"
            />
          </el-form-item>
        </el-form>
      </template>
      <template v-slot:footer>
        <el-button
          type="primary"
          size="mini"
          :loading="loading"
          @click="commit"
        >修改</el-button>
        <el-button
          size="mini"
          @click="closeDialog"
        >取消</el-button>
      </template>
    </dia-log>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import comletedList from './completed'
import activeList from './active'
import diaLog from '../components/myDialog'
import { test } from '@/api';

export default {
  name: 'TodoList',
  // 注册引入的组件
  components: {
    comletedList,
    activeList,
    diaLog,
  },

  data() {
    return {
      loading: false,
      rules: {
        cureentTodoName: [
          { required: true, message: '请输入事件', trigger: 'blur' },
        ],
      },
      isactive: false,
      iscompleted: false,
      isallTodos: true,
      formData: {
        cureentTodoName: '',
      },
      oldName: '',
    }
  },
  computed: {
    ...mapGetters(['allTodos']),
  },
  created() {
    test().then((res) => {
      console.log(res)
    })
  },
  methods: {
    // 事件状态改变
    done(name) {
      this.$store.dispatch('removeItem', name)
    },
    // 所有事件
    all() {
      this.isallTodos = true
      this.isactive = false
      this.iscompleted = false
    },
    // 正在进行的事件
    active() {
      this.isactive = true
      this.isallTodos = false
      this.iscompleted = false
    },
    // 已完成事件
    completed() {
      this.iscompleted = true
      this.isactive = false
      this.isallTodos = false
    },
    delItem(name) {
      this.$confirm('你真的要删除这个事件吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$store.dispatch('deleteItem', name)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
    commit() {
      this.$store.dispatch('updateItem', {
        oldName: this.oldName,
        newName: this.formData.cureentTodoName,
      })
      this.closeDialog()
    },
    editItem(name) {
      this.formData.cureentTodoName = name
      this.oldName = name
      this.$refs.dialog.modifyDialogConfig({ status: true })
    },
    closeDialog() {
      this.$refs.dialog.modifyDialogConfig({ status: false })
    },
    closedDialog() {
      this.formData = this.$options.data().formData
      this.$refs.myForm.resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
.box {
  color: aliceblue;
  width: 490px;
  .el-row {
    text-align: left;
    margin-top: 20px;
    .el-checkbox {
      margin-right: 20px;
    }
    .reduce {
      width: 20px;
      height: 20px;
    }
    .done {
      text-decoration: line-through;
      text-decoration-color: red;
    }
    .doneBtn {
      float: right;
    }
  }
  .delBtn {
    float: right;
  }
  .editBtn {
    float: right;
    margin-right: 20px;
  }
}
</style>
